<template>
  <div>
    <div class="fix_top">
      <div class="o_header">
        我的订单
      </div>
      <mt-navbar v-model="selected">
        <mt-tab-item id="0">待抢单</mt-tab-item>
        <mt-tab-item id="1">已抢单</mt-tab-item>
        <mt-tab-item id="2">配送中<mt-badge type="warning" size="small">{{num}}</mt-badge></mt-tab-item>
        <mt-tab-item id="3">已完成</mt-tab-item>
      </mt-navbar>
    </div>


    <!-- tab-container -->
    <mt-tab-container v-model="selected" style="background:#f1f1f1;margin:1.8rem 0 1.1rem 0;">
      <mt-tab-container-item id="0">
        <div class="order_list0" v-for="item in robList" :key="item.id">
          <p>共<b style="color:#f60;padding:0 0.1rem">{{item.hash.number}}</b>件商品<span style="color:#f60">5.0<b>元</b></span></p>
          <p>
            <ul>
              <li>
                <i class="iconfont icon-qidian"></i><span>{{item.hash.pickname}}</span>
              </li>
              <li>
                <i class="iconfont icon-zhongdian" style="color:#26a2ff"></i><span>{{item.hash.mapaddress}}{{item.hash.address}}</span>
              </li>
            </ul>
          </p>
          <p v-if="item.hash.remark">备注：{{item.hash.remark}}</p>
          <p v-else>备注：无</p>
          <p>
            <span @click="doRob(item)">立即抢单</span>
          </p>
        </div>
        <div v-if="robList.length==0" class="over_mes">
          暂无可抢订单
        </div>
        <div v-else class="over_mes">
          暂无更多订单
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="1">
        <div class="order_list1" v-for="item in robedList" :key="item.id" v-if="item.hash.status==2">
          <p>共<b style="color:#f60;padding:0 0.1rem">{{item.hash.number}}</b>件商品<span>#{{item.hash.orderid}}</span></p>
          <p>
            <ul>
              <li>
                <i class="iconfont icon-qidian"></i><span>{{item.hash.pickname}}</span>
              </li>
              <li>
                <i class="iconfont icon-zhongdian" style="color:#26a2ff"></i><span>{{item.hash.mapaddress}}{{item.hash.address}}</span>
              </li>
            </ul>
          </p>
          <p>收货人：{{item.hash.name}}</p>
          <p v-if="item.hash.remark">备注：{{item.hash.remark}}</p>
          <p v-else>备注：无</p>
          <p>
            <span @click="Tel(item)">联系顾客</span>
          </p>
        </div>
        <div v-if="robedList.length==0" class="over_mes">
          暂无已抢订单
        </div>
        <div v-else class="over_mes">
          暂无更多订单
        </div>

      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="order_list1" v-for="item in robingList" :key="item.id">
          <p>共<b style="color:#f60;padding:0 0.1rem">{{item.hash.number}}</b>件商品<b style="float:right;color:#aaa">已取货:{{item.hash.intime}}</b></p>
          <p>
            <ul>
              <li>
                <i class="iconfont icon-qidian"></i><span>{{item.hash.pickname}}</span>
              </li>
              <li>
                <i class="iconfont icon-zhongdian" style="color:#26a2ff"></i><span>{{item.hash.mapaddress}}{{item.hash.address}}</span>
              </li>
            </ul>
          </p>
          <p>收货人：{{item.hash.name}}</p>
          <p v-if="item.hash.remark">备注：{{item.hash.remark}}</p>
          <p v-else>备注：无</p>
          <p>
            <span @click="Tel(item)">联系顾客</span>
          </p>
        </div>
        <div v-if="robingList.length==0" class="over_mes">
          暂无配送中订单
        </div>
        <div v-else class="over_mes">
          暂无更多订单
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div class="order_list2" v-for="item in robendList" :key="item.id">
          <p><span>{{item.hash.sendtime}}</span><span style="color:#f60">5.0<b>元</b></span></p>
          <p>
            <ul>
              <li>
                <i class="iconfont icon-qidian"></i><span>{{item.hash.pickname}}</span>
              </li>
              <li>
                <i class="iconfont icon-zhongdian" style="color:#26a2ff"></i><span>{{item.hash.mapaddress}}{{item.hash.address}}</span>
              </li>
            </ul>
          </p>
          <p>
            <i class="iconfont icon-yiwancheng2"></i>
            <span>订单号：{{item.hash.ordernumber}}</span>
            <span>取货时间：{{item.hash.robbtime}}</span>
            <span>取货货码：#{{item.hash.orderid}}</span>
          </p>

        </div>
        <div v-if="robendList.length==0" class="over_mes">
          暂无已完成订单
        </div>
        <div v-else class="over_mes">
          暂无更多订单
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      robList: [],
      robedList: [],
      orderlist: [],
      robingList: [],
      robendList: [],
      selected: '0',
    };
  },
  watch: {
    selected(newvalue) {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle',
      });
      if (newvalue == 0) {
        this.getrobList();
      } else if (newvalue == 1) {
        this.getrobedList();
      } else if (newvalue == 2) {
        this.getRobingList();
      } else {
        this.getrobendList();
      }
    },
  },
  created() {
    this.getrobList();
    this.getRobingList();
  },
  methods: {
    text() {
      alert('11');
    },
    doRob(item) {
      const req = {
        handle: '235E51588A29222B76692188F6DA825CCADA3CE80EA0D1E6',
        orderid: item.hash.orderid,
      };
      this.$messagebox.confirm({
        message: '是否抢单,抢单后不可取消？',
        title: '提示',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action == 'confirm') {
          this.spost(this.ts, '/mainservlet', req).then(() => {
            this.$messagebox('提示', '抢单成功');
            this.getrobList();
          });
        }
      }).catch((err) => {
        if (err == 'cancel') {
          this.$messagebox('提示', '已取消');
        }
      });
    },
    getrobList() {
      const req = {
        handle: '235E51588A29222BC7A94A7D3B27B5899A7AC0D445A35B93',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.robList = ts.d.data.operation1;
        this.$indicator.close();
      });
    },
    getrobedList() {
      const req = {
        handle: '235E51588A29222BE2D26261CD9232B708B6C26C48D8E4A5BFF0B9210751F692',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.robedList = ts.d.data.operation1;
        this.$indicator.close();
      });
    },
    getRobingList() {
      const req = {
        handle: '235E51588A29222B50819246A49AA8733D55AA6A7AD5C6A244B455B1B2775577',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.robingList = ts.d.data.operation1;
        this.num = this.robingList.length;
        this.$indicator.close();
        for (let i = 0; i < this.robingList.length; i += 1) {
          this.robingList[i].hash.sendtime = `${new Date(this.robingList[i].hash.sendtime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(this.robingList[i].hash.sendtime * 1000).toTimeString().substr(0, 8)}`;
          this.robingList[i].hash.robbtime = `${new Date(this.robingList[i].hash.robbtime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(this.robingList[i].hash.robbtime * 1000).toTimeString().substr(0, 8)}`;
        }
      });
    },
    getrobendList() {
      const req = {
        handle: '235E51588A29222B50819246A49AA873913E0DEE15BBCE61BFF0B9210751F692',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.robendList = ts.d.data.operation1;
        this.$indicator.close();
        for (let i = 0; i < this.robendList.length; i += 1) {
          this.robendList[i].hash.intime = ` ${new Date(this.robendList[i].hash.intime * 1000).toTimeString().substr(0, 8)}`;
        }
      });
    },
    Tel(item) {
      this.$messagebox({
        title: '手机号',
        message: item.hash.phone,
        showCancelButton: true,
        confirmButtonText: '拨打电话',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action == 'confirm') {
          this.$messagebox('提示', '拨打中...');
        }
      }).catch((err) => {
        if (err == 'cancel') {
          this.$messagebox('提示', '已取消');
        }
      });
    },
  },
  computed: {
    money() {
      return (item) => {
        let data = 0;
        for (let i = 0; i < item.length; i += 1) {
          data += item[i].PRODUCTPRICE * item[i].PRODUCTNUM;
        }
        return data;
      };
    },
  },
};
</script>

<style lang="stylus">
.fix_top
  position fixed
  width 100%
  top 0
  z-index 2
.over_mes
  height 0.7rem
  line-height 0.7rem
  text-align center
  color #aaa
.o_header
  height 0.8rem
  background #26a2ff
  line-height 0.8rem
  font-size 0.3rem
  font-weight bold
  text-align center
  color #fff
.order_num
  height 0.6rem
  line-height 0.6rem
.mint-badge.is-size-small
  padding 0 6px
.mint-button
  width 100%
  height 0.6rem
  font-size 0.3rem
.mint-navbar
  .mint-tab-item-label
    font-weight bold
    font-size 0.25rem
.mint-navbar .mint-tab-item.is-selected
  border-bottom 2px solid #26a2ff
  margin-bottom 0
.order_list0
  background #ffffff
  padding 0.1rem
  border-radius: 0.05rem;
  width: 96%;
  margin: 0.1rem auto
  border 1px solid #f1f1f1
  p
    &:nth-child(1)
      height 0.6rem
      line-height 0.6rem
      font-size 0.3rem
      border-bottom 1px solid #f1f1f1
      padding-left 0.2rem
      b
        color #f60
        &:last-child
          font-size 0.3rem
      span
        font-size 0.4rem
        display:inline-block;
        float right
    &:nth-child(2)
      ul
        padding 0.1rem 0
        li
          span
            max-width 80%
            padding-left 5%
            display inline-block
            line-height 0.7rem
            height 0.8rem
          i
            float left
            color #88870a
            font-size 0.8rem
    &:nth-child(3)
      line-height: 0.6rem;
      margin-left 0.2rem

    &:last-child
      padding-top 0.1rem
      border-top 1px solid #f1f1f1
      span
        width: 98%;
        margin: 0 auto;
        text-align: center;
        display inline-block
        padding 0.2rem 0.3rem
        background #26a2ff
        color #fff
        border-radius 0.1rem


.order_list1
  background #ffffff
  padding 0.1rem
  border-radius: 0.05rem;
  width: 96%;
  margin: 0.1rem auto
  border 1px solid #f1f1f1

  p
    &:nth-child(1)
      height 0.6rem
      line-height 0.6rem
      padding-left 0.2rem
      border-bottom 1px solid #f1f1f1
      span
        &:nth-child(1)
          max-width 80%
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space:nowrap;
          display:inline-block;
        &:nth-child(2)
          float right
          color #f60
          font-size 0.4rem
    &:nth-child(2)
      ul
        padding 0.1rem 0
        li
          span
            max-width 80%
            padding-left 5%
            display inline-block
            line-height 0.7rem
            height 0.8rem
          i
            float left
            color #88870a
            font-size 0.8rem
    &:nth-child(3)
      padding-left 0.2rem
      line-height: 0.6rem;
    &:nth-child(4)
      padding-left 0.2rem
      line-height: 0.5rem;
    &:last-child
      padding-top 0.1rem
      border-top 1px solid #f1f1f1
      span
        width: 98%;
        margin: 0 auto;
        text-align: center;
        display inline-block
        padding 0.2rem 0.3rem
        background #26a2ff
        color #fff
        border-radius 0.1rem


.order_list2
  background #ffffff
  padding 0.1rem
  border-radius: 0.05rem;
  width: 96%;
  margin: 0.1rem auto
  border 1px solid #f1f1f1

  p
    &:nth-child(1)
      height 0.6rem
      line-height 0.6rem
      padding-left 0.2rem
      border-bottom 1px solid #f1f1f1
      span
        &:nth-child(1)
          display:inline-block;
        &:nth-child(2)
          float right
          color #f60
          font-size 0.4rem
      b
        font-size 0.3rem
    &:nth-child(2)
      border-bottom 1px solid #f1f1f1
      ul
        padding 0.1rem 0
        li
          span
            max-width 80%
            padding-left 5%
            display inline-block
            line-height 0.4rem
            height 0.8rem
          i
            float left
            color #88870a
            font-size 0.8rem
    &:last-child
      color #aaa
      margin 0.2rem 0
      position relative
      span
        display block
        margin-bottom 0.1rem
      i
        position absolute
        right 0
        font-size 0.9rem
        color green
        top 5%
</style>

